<template>
	<view :style="{ '--color': vuex_config.themeColor1 }">
		<!-- 订单状态提醒 -->
		<view class="state-box">
			<u-icon name="e656" custom-prefix="iconfont" size="60" color="#ffffff"></u-icon>
			<view class="state-icon u-m-l-20">{{ orderInfo | statusFilter }}</view>
		</view>
		<!--      收货人信息-->
		<template v-if="addressVisible && orderInfo.name">
			<view class="profile_box"></view>
			<view class="info-box u-border-bottom">
				<u-icon name="e769" size="44" color="#666666" custom-prefix="iconfont"></u-icon>
				<view class="info-content">
					<view class="info-top u-flex">
						<view class="info-name u-line-1">{{ orderInfo.name }}</view>
						<view class="info_mobile">{{ orderInfo.mobile }}</view>
						<view class="sww-tp copy" @click.stop="copyInfo()">复制</view>
					</view>
					<view class="info-detail u-m-t-6" v-if="orderInfo.address">{{ orderInfo.address }}</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
import { uniCopy } from '@/utils/uniPromise';
import { orderjs } from '@/components/sww-page-order/orderjs.js';
export default {
	mixins: [orderjs],
	props: {
		orderInfo: {
			type: Object,
			default: () => {
				return {};
			}
		},
		addressVisible: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {};
	},

	mounted() {},
	methods: {
		// 复制收货人信息
		copyInfo() {
			let info = `订单号：${this.orderInfo.order_no} 收货人：${this.orderInfo.name} 手机号：${this.orderInfo.mobile} 收货地址：${this.orderInfo.address}`;
			uniCopy(info).then(() => {
				this.$toast('复制成功');
			});
		}
	}
};
</script>

<style scoped lang="scss">
/* 状态 */
.state-box {
	width: 100%;
	height: 110rpx;
	padding: 0 30rpx;
	background-color: var(--color);
	color: #ffffff;
	font-size: 28rpx;
	display: flex;
	align-items: center;
}
/* 收货人信息 */
.profile_box {
	background-color: var(--color);
	height: 30rpx;
}
.info-box {
	background: #fff;
	border-radius: 20rpx 20rpx 0 0;
	position: relative;
	margin-top: -30rpx;
	overflow: hidden;
	width: 100%;
	padding: 30rpx 24rpx;
	display: flex;
	.info-content {
		flex: 1;
		overflow: hidden;
		margin: 0 24rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		font-size: 26rpx;
		color: #666666;
		.info-name {
			max-width: 300rpx;
		}
		.info_mobile {
			margin: 0 30rpx 0 12rpx;
		}
		.copy {
			flex: 1;
			overflow: hidden;
		}
	}
}
</style>
